<template>
  <view class="work-container">
    <!-- 轮播图 -->
    <uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
      <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
        <swiper-item v-for="(item, index) in data" :key="index">
          <view class="swiper-item" @click="clickBannerItem(item)">
            <image :src="item.image" mode="aspectFill" :draggable="false" />
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>

    <!-- 宫格组件 -->
    <!-- <uni-section title="工作台" type="line"></uni-section>
    <view class="grid-body">
      <u-grid border :showBorder="false" @click="changeGrid">
        <u-grid-item :index="0">
          <view class="grid-item-box">
						<image src="/static/images/home/isolation.svg" style="width:28px;height:28px;"></image>
            <text class="text">隔离管理</text>
          </view>
        </u-grid-item>
				<u-grid-item :index="1">
				  <view class="grid-item-box">
				    <uni-icons color="#2b85e4" type="gift" size="30"></uni-icons>
				    <text class="text">财务报销</text>
				  </view>
				</u-grid-item>
      </u-grid>
    </view> -->
		<view v-for="(work,i) in workList" :key="i">
			<uni-section :title="work.name" type="line"></uni-section>
			<view class="grid-body">
				<u-grid border :showBorder="false" >
					<u-grid-item v-for="(item,index) in work.list" :index="index" :key="index" v-if="$auth.hasPermi(item.auth)" @click="changeGrid(item.page)">
						<view class="grid-item-box">
							<u-icon size="30" :name="item.icon"></u-icon>
							<text class="text">{{item.title}}</text>
						</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
  </view>
</template>

<script>
	import appUpdate from '@/utils/appUpdate.js'
	import { mapGetters } from 'vuex'
  export default {
    data() {
			const icon_prefix = '/static/images/home/'
      return {
        current: 0,
        swiperDotIndex: 0,
        data: [
          {
            image: '/static/images/banner/1.jpg'
          },
          {
            image: '/static/images/banner/2.jpg'
          },
					{
					  image: '/static/images/banner/3.jpg'
					}
        ],
				workList:[
					{
						name:'工作台',
						list:[
							{
								title:"通用组件",
								icon:icon_prefix+"isolation.svg",
								description:"隔离管理",
								page:'Test',
								auth:['erp:IsolationList:table']
							},
							{
								title:"业务组件",
								icon:icon_prefix+"isolation.svg",
								description:"业务组件",
								page:'BizTest',
								auth:['erp:IsolationList:table']
							}
						]
					}
				]
      }
    },
		computed:{
			...mapGetters(['token'])
		},
    methods: {
      clickBannerItem(item) {
        console.info(item)
      },
      changeSwiper(e) {
        this.current = e.detail.current
      },
      changeGrid(page) {
				// if(index === 0){
				// 	this.$Router.push('/pages/test/index')
				// }
				if(!page){
					return false;
				}
				this.$Router.push({name: page})
      },
			appUpdate(){
				uni.getSystemInfo({
					success: function(e) {
						// #ifdef APP-PLUS
						// 检测升级
						appUpdate()
						// #endif
						// #ifndef MP
						Vue.prototype.StatusBar = e.statusBarHeight;
						if (e.platform == 'android') {
							Vue.prototype.CustomBar = e.statusBarHeight + 50;
						} else {
							Vue.prototype.CustomBar = e.statusBarHeight + 45;
						};
						// #endif
				
						// #ifdef MP-WEIXIN
						Vue.prototype.StatusBar = e.statusBarHeight;
						let custom = wx.getMenuButtonBoundingClientRect();
						Vue.prototype.Custom = custom;
						Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
						// #endif		
				
						// #ifdef MP-ALIPAY
						Vue.prototype.StatusBar = e.statusBarHeight;
						Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
						// #endif
					}
				})
			},
    },
		mounted() {
			if(this.token && process.env.NODE_ENV !== 'development'){
				this.appUpdate()
			}
		}
  }
</script>

<style lang="scss">
  /* #ifndef APP-NVUE */
  page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #fff;
    min-height: 100%;
    height: auto;
  }

  view {
    font-size: 14px;
    line-height: inherit;
  }

  /* #endif */

  .text {
    text-align: center;
    font-size: 26rpx;
    margin-top: 10rpx;
  }

  .grid-item-box {
    flex: 1;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
  }

  .uni-margin-wrap {
    width: 690rpx;
    width: 100%;
  }

  .swiper {
     height: 370rpx;
  }

  .swiper-box {
     height: 370rpx;
  }

  .swiper-item {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    height: 370rpx;
    line-height: 370rpx;
  }

  @media screen and (min-width: 500px) {
    .uni-swiper-dot-box {
      width: 400px;
			// height: 300px;
      /* #ifndef APP-NVUE */
      margin: 0 auto;
      /* #endif */
      margin-top: 8px;
    }

    .image {
      width: 100%;
    }
  }
	
	.nav-list {
		display: flex;
		flex-wrap: wrap;
		padding: 0px 20upx 0px;
		justify-content: space-between;
		margin-top: 40upx;
	}
	
	.nav-li {
		padding: 30upx;
		border-radius: 12upx;
		width: 100%;
		margin: 0 2.5% 40upx;
		background-size: cover;
		background-position: center;
		position: relative;
		z-index: 1;
	}
	
	.nav-li::after {
		content: "";
		position: absolute;
		z-index: -1;
		background-color: inherit;
		width: 100%;
		height: 100%;
		left: 0;
		bottom: -10%;
		border-radius: 10upx;
		opacity: 0.2;
		transform: scale(0.9, 0.9);
	}
	
	.nav-li.cur {
		color: #fff;
		background: rgb(94, 185, 94);
		box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
	}
	
	.nav-title {
		font-size: 32upx;
		font-weight: 300;
	}
	
	.nav-title::first-letter {
		font-size: 40upx;
		margin-right: 4upx;
	}
	
	.nav-name {
		font-size: 28upx;
		text-transform: Capitalize;
		margin-top: 20upx;
		position: relative;
	}
	
	.nav-name::before {
		content: "";
		position: absolute;
		display: block;
		width: 40upx;
		height: 6upx;
		background: #fff;
		bottom: 0;
		right: 0;
		opacity: 0.5;
	}
	
	.nav-name::after {
		content: "";
		position: absolute;
		display: block;
		width: 100upx;
		height: 1px;
		background: #fff;
		bottom: 0;
		right: 40upx;
		opacity: 0.3;
	}
	
	.nav-name::first-letter {
		font-weight: bold;
		font-size: 36upx;
		margin-right: 1px;
	}
	
	.nav-li text {
		position: absolute;
		right: 30upx;
		top: 30upx;
		font-size: 52upx;
		width: 60upx;
		height: 60upx;
		text-align: center;
		line-height: 60upx;
	}
	
	.text-light {
		font-weight: 300;
	}
</style>
